<template>
        <div class="book-detail-horizental-box">
            <router-link
                class="img-box"
                :to="`/ContentDisplay/BookDetail/${bookData.id}?f=LocalHistory&code=local-history`"
            >
                <img :src="bookData.cover" alt=""/>
            </router-link>
            <div class="description-box">
                <router-link
                    :to="`/ContentDisplay/BookDetail/${bookData.id}?f=LocalHistory&code=local-history`"
                    class="description-title"
                >
                    {{bookData.title || '--'}}
                </router-link>
                <div class="description-item">
                    <a-icon class="icon" type="user" />&nbsp;
                    {{bookData.author || '--'}}
                </div>
                <div class="description-item publication-time">
                    <a-icon class="icon" type="read" />
                    &nbsp;{{`出版时间：${yearMonthDate(bookData.time) || '--'}`}}
                </div>
                <div class="description-item">
                    {{`概述：${bookData.description || '--'}`}}
                </div>
            </div>
        </div>
</template>

<script>
export default {
    name: "BookDetailHorizentalLocalHistoryComponent",
    props:{
        bookData:{
            type:Object,
            default(){
                return {}
            }
        }
    },
    methods:{
        yearMonthDate(Date){
            if(!Date)return Date
            let val = Date.split(' ')[0];
            val = val.split('-');
            return val[0] + '年' + val[1] + '月'
        }
    }
}
</script>

<style lang="less" scoped>
@import "../../../assets/global.less";
@media only screen and (max-width: 576px){
    @width:75vw;
    @height:41vw;
    .book-detail-horizental-box{
        width: @width;
        max-height:@height;
        display:flex;
        justify-content:space-between;
        .img-box{
            width:calc((@width - 3vw) / 3);
            height:@height;
            object-fit: cover;
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
            cursor: pointer;
            box-sizing:border-box;
            img{
                border:none;
                width:calc((@width - 6vw) / 3);
                height:@height;
                object-fit: cover;
            }
        }
        .description-box{
            width:calc((@width - 6vw) / 3 * 2);
            height:@height;
            box-sizing:border-box;
            .description-title{
                font-size: 3vw;
                font-weight: bold;
                color: #020202;
                line-height: 5vw;
                .line-ellipsis(1);
            }
            .description-item{
                font-size: 3vw;
                font-weight: 400;
                color: #4E4E4E;
                line-height: 5vw;
                .line-ellipsis(3);
                .icon{
                    font-size:4vw;
                    color:RGBA(15, 121, 205, 1);
                }
            }
            .publication-time{
                .line-ellipsis(2);
            }
        }
    }
}

@media only screen and (min-width:576px){
    .book-detail-horizental-box{
        width: 280px;
        max-height: 260px;
        display:flex;
        justify-content:space-between;
        flex-wrap: wrap;
        margin:auto;
        .img-box{
            width:110px;
            height:180px;
            object-fit: cover;
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
            img{
                width:110px;
                height:180px;
                object-fit: cover;
            }
        }
        .description-box{
            width:160px;
            height:180px;
            .description-title{
                font-size: 12px;
                font-weight: bold;
                color: #020202;
                line-height: 24px;
                .line-ellipsis(1);
            }
            #publication-time{
                .line-ellipsis(2);
            }
            .description-item{
                font-size: 8px;
                font-weight: 400;
                color: #4E4E4E;
                line-height: 19px;
                .line-ellipsis(3);
                .icon{
                    font-size:13px;
                    color:RGBA(15, 121, 205, 1);
                }
            }
        }
    }
}

</style>
